<template>
  <div class="songs">
    <div class="container">
      <div class="tab">
        <div class="category">
          <a href="javascript:;" @click="showCategory">{{ tabActive }} &gt;</a>
          <div class="categoryContent" v-show="isShowCategory">
            hello world!!!
          </div>
        </div>
        <ul class="tagList" v-if="tagList.length">
          <li class="tagItem" v-for="item in tagList" :key="item.id">
            <a href="javascript:;" @click="handleClick(item)" :class="item.name === tabActive ? 'active' : ''">
              {{ item.name }}
            </a>
          </li>
        </ul>
        <div class="content">
          <Card :dataList="songList" :isPlayCount="true" :itemWidth="{height: '260px'}" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Card from '../../components/Card'
// ['title', 'dataList', 'isPlayCount', 'itemWidth']
export default {
  name: 'Songs',
  components: {
    Card
  },
  data () {
    return {
      tabActive: '全部歌单', // 激活的歌单
      tagList: [], // 歌单标签
      songList: [], // 歌单列表
      isShowCategory: false,
      categoryList: [] // 分类列表
    }
  },
  methods: {
    handleClick (tag) {
      this.tabActive = tag.name
      this.getSongsList(this.tabActive)
    },
    // 显示分类标签内容
    showCategory () {
      this.isShowCategory = !this.isShowCategory
    },
    // 获取标签列表
    async getTagList () {
      const res = await this.$http.get('/playlist/hot')
      this.tagList = res.data.tags
    },
    // 获取对应标签名的歌单列表
    async getSongsList (name) {
      const res = await this.$http.get(`/top/playlist?cat=${name}`)
      const songList = res.data.playlists
      songList.map(item => {
        item.picUrl = item.coverImgUrl
      })
      this.songList = songList
    },
    // 获取到全部分类
    async getCategoryList () {
      const res = await this.$http.get('/playlist/catlist')
      console.log(res.data)
    }
  },
  created () {
    // 初始化歌单页面
    this.getTagList()
    // 获取全部歌单
    this.getSongsList('')
    // 获取标签分类信息
    this.getCategoryList()
  }
}
</script>

<style lang="less" scoped>
.songs {
  margin-top: 33px;
}
.container {
  width: 1100px;
  margin: 0 auto;
}

.tab {
  overflow: hidden;
  // background-color: aqua;
  padding: 10px 0;
  .category {
    position: relative;
    float: left;
    a {
      display: block;
      padding: 5px 20px;
      border-radius: 20px;
      border: 1px solid gray;
      color: #676767;
    }
    .categoryContent{
      position: absolute;
      left: 0;
      top: 40px;
      width: 900px;
      height: 500px;
      background-color: #fff;
      z-index: 99;
    }
  }
  .tagList {
    float: right;
    .tagItem {
      float: left;
      a {
        display: block;
        padding: 5px 20px;
        color: #676767;
      }
      a.active{
        color: #c20c0c;
      }
    }
  }

  .content {
    margin-top: 50px;
    .contentItem {
      display: none;
    }
  }
}
</style>
